<template>
<div>
   <div>
    <h1>{{msg}}</h1>
 </div>
  <div>
      <!-- 6,使用子组件 -->
      <!-- <testB></testB> -->
      <!-- 7,1在组件上声明   这里的dataA是子组件定义的，由子组件暴露出来；mgsA是父组件自己的值，想要传的值-->
      <!-- <testB :dataA='msgA'></testB> -->
      <!-- 8,1父组件调用子组件的方法  vue中 @等于v-on :等于v-bind  testB是子组件暴露出来的
          子组件一般方法是封装在自身的，也就是没必要在父组件定义触发 如果一定要用父组件触发，那么可以是用vue特有的ref去绑定，refs去使用-->
      <!-- <testB :dataA='msgA' ref="testB"></testB>
      <br />
      <h1 @click="testA()">付---点这里</h1> -->
        <!-- 9,2子组件调用父组件方法  testBB为子组件声明暴露出来的，testAA为父组件自己的方法-->
        <!-- 10,1子组件向父组件传值 子组件在向父组件调用的方法中加入变量，然后父组件在接参是，第一，不要在html的接收参数这里使用（），如果使用传值，那么需要加上$event的原生方法去捕捉-->
        <!-- 返参，并且自己不想加值返回 -->
      <!-- <testB :dataA='msgA' ref="testB" @testBB="testAA"></testB> -->
        <!--  返回一个参，并且自己想加值返回  $event这单词是一定的-->
      <!-- <testB :dataA='msgA' ref="testB" @testBB="testAA($event,i)" v-for="i in 2"></testB> -->
      <!-- 返回多参，并且自己想加值返回  arguments这单词是一定的-->
      <testB :dataA='msgA' ref="testB" @testBB="testAA(arguments,i)" v-for="i in 2"></testB>
  </div> 
</div>
 
</template>

<script>
import testB from './testB'//4,接收子组件
export default {
    components:{
        testB//5,接收后，声明
    },
  data () {
    return {
      msg: '这里是父组件',
      //7,父向子传值
      msgA:'这是父组件传过来的值'
    }
  },
  methods: {
      testA(){
          console.log("触发子组件事件")
        this.$refs.testB.testB()
      },
      // testAA(v1,i){
      //     console.log(v1,v2,i)
      //     this.msg=this.msg+'-----我的方法被调用了'
      //     this.msgA=this.msgA+'-----'+v1
      // },
    testAA(value,i){
          console.log(value,i)
          this.msg=this.msg+'-----我的方法被调用了'
          this.msgA=this.msgA+'-----'+value[1]+value[0]
      }
  }
}
</script>

<style scoped>

</style>
